<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/static/web/jsp/include.jsp"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上链</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="${path}/static/web/style/style.css">
    <link rel="stylesheet" href="${path}/static/web/style/hizoom.css">
    <link rel="stylesheet" href="${path}/static/web/style/page_nav.css">
    <link rel="stylesheet" href="${path}/static/web/style/art.css">
</head>
<body>
    <!-- 导航 -->
    <%@ include file="/static/web/jsp/top.jsp"%>

    <div id="uploadArtController" v-cloak>

        <div class="model_container">
            <div class="news_head">
                <img class="head_pic" src="${path}/static/web/images/upload_head.png">
            </div>
        </div>

        <!--上传内容 -->
        <div class="model_container">

            <div class="upload_block clearfix">
                <div class="upload_item">
                    <span class="upload_name">艺术品名称:</span>
                    <div class="upload_content">
                        <input class="upload_put" type="text" name="art_name" placeholder="请输入艺术品名称" v-model="name"/>
                    </div>
                </div>
                <%--<div class="upload_item">--%>
                    <%--<span class="upload_name">关键字:</span>--%>
                    <%--<div class="upload_content">--%>
                        <%--<input class="upload_put" type="text" name="art_name" placeholder="请输入关键字（多个关键词以顿号“、”分隔）" v-model="keyword"/>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <div class="upload_item">
                    <span class="upload_name">选择分类:</span>
                    <div class="upload_content">
                        <ul class="keywords_box">
                            <li  v-for="item in keywords" @click="selectKey(item)" :class="{'keyword_item active':hasKey(item.id),'keyword_item':!hasKey(item.id)}">{{item.typeName}}</li>
                        </ul>
                    </div>
                </div>
                <div class="upload_item">
                    <span class="upload_name">创作年份:</span>
                    <div class="upload_content">
                        <input id="year" class="upload_put" type="text" name="art_name" placeholder="请输入艺术品年份" v-model="year"/>
                    </div>
                </div>
                <div class="upload_item">
                    <span class="upload_name">拍卖底价:</span>
                    <div class="upload_content">
                        <input class="upload_put" type="number" name="art_name" placeholder="请输入艺术品拍卖底价" v-model="price" min="0"/>
                    </div>
                </div>
                <div class="upload_item">
                    <span class="upload_name">尺寸（长-厘米）:</span>
                    <div class="upload_content">
                        <input class="upload_put" type="number" name="art_name" placeholder="请输入艺术品的长" v-model="size.height" min="0"/>
                    </div>
                </div>
                <div class="upload_item">
                    <span class="upload_name">尺寸（宽-厘米）:</span>
                    <div class="upload_content">
                        <input class="upload_put" type="number" name="art_name" placeholder="请输入艺术品的宽" v-model="size.width" min="0"/>
                    </div>
                </div>
                <div class="upload_item">
                    <span class="upload_name">尺寸（高-厘米）:</span>
                    <div class="upload_content">
                        <input class="upload_put" type="number" name="art_name" placeholder="请输入艺术品的高" v-model="size.high" min="0"/>
                    </div>
                </div>
                <div class="upload_item">
                    <span class="upload_name">艺术品简介:</span>

                    <div class="upload_content">
                        <div class="upload_profile">
                            <div class="profile_item" v-for="(item,index) in info">
                                <textarea class="upload_area" name="" cols="30" rows="3" placeholder="请输入艺术品简介" v-model="item.content"></textarea>
                                <a class="profile_del_btn" href="javascript:void(0);" @click="delItem(index,item)" v-if="index > 0">删除</a>
                                <div class="upload_pics">
                                    <div class="pic_item" v-show="item.img" v-for="(image,imgIndex) in item.img.split(',')"><i class="icon icon_close" @click="delImg(index,imgIndex)"></i><img src="${path}/static/web/images/waterfull_01.png" v-sy-img="image"/></div>
                                    <div v-show="item.img.split(',').length < 9" class="pic_item" @click="uploadImg(item,index)"><i class="icon icon_upload"></i></div>
                                </div>
                            </div>

                        </div>
                        <a class="profile_add_btn" href="javascript:void(0);" @click="addInfo"><i class="icon icon_add"></i>继续添加图片</a>
                    </div>
                </div>

                <div class="upload_submit" @click="addArt">
                    <a href="javascript:void(0);" class="btn btn_primary">上 传</a>
                </div>
            </div>

        </div>

        <div class="what_art">
            <p class="art_tip">艺小锤平台将收取成拍价的百分之十作为佣金</p>
            <a class="tip_link" href="${path}/web/chainArt">什么是艺术品上链?</a>
        </div>

        <iframe name='hidden_frame' id="hidden_frame" style="display: none;"></iframe>
        <form action="${path}/fileUpload?callback=callback" id="form1" name="form1" encType="multipart/form-data" method="post" target="hidden_frame">
            <input type="file" id="img" accept="image/jpg, image/jpeg, image/png, image/gif" name="file" style="background: white;display: none;" />
        </form>
    </div>


    <!-- 客服 -->
    <%@ include file="/static/web/jsp/footer.jsp"%>



</body>
<%--<script src="${path}/static/web/js/jquery.min.js"></script>--%>
<script src="${path}/static/web/js/laydate/laydate.js"></script>
<script src="${path}/static/web/js/slide.js"></script>
<script src="${path}/static/web/js/carousel.js"></script>

<script src="${path}/static/web/js/jquery.masonry.min.js"></script>
<script src="${path}/static/web/js/jQeasing.js"></script>

<script src="${path}/static/web/js/jquery.nicescroll.js"></script>

<script src="${path}/static/web/js/hizoom.js"></script>

<script src="${path}/static/web/js/jquery.page.js"></script>

<script src="${path}/static/web/js/art.js"></script>
<script src="${path}/static/web/js/biz/upload_art.js"></script>
<script>
    //选择关键字
    $('.keywords_box .keyword_item').click(function(){
        $(this).toggleClass('active');
    });
    //删除上传图片
//    $(document).on('click','.pic_item .icon_close',function(){
//        $(this).parent().remove();
//    });

    //添加图文
//    $('.profile_add_btn').click(function(){
//        var profileHtml='<div class="profile_item">'
//                            +'<textarea class="upload_area" name="" cols="30" rows="3" placeholder="请输入艺术品简介"></textarea>'
//                            +'<div class="upload_pics">'
//                                +'<div class="pic_item"><i class="icon icon_upload"></i><input type="file" class="file_put" multiple/></div>'
//                            +'</div>'
//                        +'</div>';
//        $('.upload_profile').append(profileHtml);
//    });


</script>
</html>